﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String basepath = request.getContextPath(); %>
<!DOCTYPE html>
<html lang="UTF8">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>数据导流器</title>
    <!-- Bootstrap core CSS -->
    <link href="<%=basepath%>/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">蜂流器</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
<hr>
      <!-- Main component for a primary marketing message or call to action -->
      <div class="row clearfix">
      	<div class="col-md-3 column">
      	</div>
			<div class="col-md-6 column">
	      	<form>		
					  <div>
							<label for="DBType">数据库类型</label>
							<select class="form-control" id="DBType">
							  <option value="0">选择数据库类型</option>
							  <option value="1">MYSQL</option>
							  <option value="2">PostgreSQL</option>
							</select>
					  </div>
					  <div class="form-group">
					    <label for="IPAddress">企业名称</label>
					    <input type="text" class="form-control" id="companyName" placeholder="企业名称(只能英文字母或数字)">
					  </div>
					  <div class="form-group">
					    <label for="IPAddress">主机名或IP地址</label>
					    <input type="text" class="form-control" id="IPAddress" placeholder="IP地址">
					  </div>
					  <div class="form-group">
					    <label for="portNo">端口（一般MYSQL:3306, Oracle:1521, PostgreSQL:5432）</label>
					    <input style="width:200px" type="text" class="form-control" id="portNo" placeholder="端口号">
					  </div>
					  <div class="form-group">
					    <label for="DBName">数据库名</label>
					    <input style="width:200px" type="text" class="form-control" id="DBName" placeholder="数据库名">
					  </div>
					  <div class="form-group">
					    <label for="userName">用户名</label>
					    <input type="text" class="form-control" id="userName" placeholder="用户名">
					  </div>
					  <div class="form-group">
					    <label for="userPwd">密码</label>
					    <input type="password" class="form-control" id="userPwd" placeholder="数据库连接密码(可为空)">
					  </div>
					  <hr>
					  <div class="checkbox">
					    <label>
					      <input type="checkbox"> 保存密码
					    </label>
					  </div>
					  <button type="button" class="btn btn-default" onclick="submitInfo()">链接/下一步</button>
					</form>
				</div>
				<div class="col-md-3 column">
      	</div>
			</div><!--end of rwo -->
    </div> <!-- /container -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="<%=basepath%>/dist/js/bootstrap.min.js"></script>
  	<script src="<%=basepath%>/js/dropdown.js"></script>
  </body>
  <script type="text/javascript">
  	function submitInfo(){
  		var DBType = $("#DBType").val(),
  			IPAddress = $("#IPAddress").val(),
  			portNo = $("#portNo").val(),
  			DBName = $("#DBName").val(),
  			userName = $("#userName").val(),
  			userPwd = $("#userPwd").val(),
  			companyName = $("#companyName").val();
  		if(DBType == 0){
  			alert("请选择数据库类型!");
  			return;
  		}
  		if(!IPAddress || !portNo || !DBName || !userName || !companyName){
  			alert("请输入完整!");
  		}else{
  			$.post(
  				"<%=basepath%>/connectDB",
  				{companyName:companyName,DBType:DBType,IPAddress:IPAddress,portNo:portNo,DBName:DBName,userName:userName,userPwd:userPwd},
  				function(data){
  					if(data == '1'){
  						window.location.href="<%=basepath%>/data_manage.jsp";
  					}else if(data == '3'){
  						alert("数据库连接失败,请检查输入参数!");
  					}else if(data == '10'){
  						alert("暂不支持此数据库连接！");
  					}else{
  						alert("参数异常,请刷新页面后重试!");
  					}
  				}		
  			);
  		}
  		
  		
  	}
  </script>
</html>
